<!--
 * @Author: yuanjunyi
 * @Date: 2024-02-23 15:03:31
 * @LastEditors: yuanjunyi
 * @LastEditTime: 2024-03-05 11:11:11
 * @Description: this is description
-->
<template>
  <div class="top">
    <div>智能产线规划 专机设备研发</div>
  </div>

  <div>
    <div class="part-title">
      <div>数智工厂看得见的管理效益</div>
      <p>强化数字化运营，实现降本增效提质</p>
    </div>
    <intelligence-factory
      :data="intelligenceFactoryData"
      :hoverImage="imgUrl + 'intelligent-hover-bg.png'"
      :liHeight="180"
    ></intelligence-factory>
    <div class="part-title">
      <div>数智工厂整合规划应用场景</div>
      <p>强化数字化运营，实现降本增效提质</p>
    </div>
  </div>
  <div class="accordion">
    <div
      v-for="(item, index) in factoryData"
      :key="index"
      :class="{ active: activeIndex === index }"
      @mouseover="setActive(index)"
      class="accordion-item"
    >
      <div class="accordion-item-title">
        {{ item.title }}
      </div>
      <div class="hover-card">
        <div>
          <h3>{{ item.title }}</h3>
          <p v-for="text in item.textArr">{{ text }}</p>
        </div>
      </div>
      <img :src="item.image" alt="image" />
    </div>
  </div>
  <div>
    <div class="part-title">
      <div>专为数字工厂而设计</div>
      <p>
        全新的数字化协同管理方式，应用于工厂派工、生产、设备、质检等各个场景
      </p>
    </div>
    <img
      :src="imgUrl + 'intelligent-num.png'"
      alt=""
      style="
        width: 1136px;
        heigh: 465px;
        display: block;
        margin: 60px auto 100px;
      "
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { imgUrl } from "@/utils/common";
import CoreCompetitiveness from "@/views/about-us/components/core-competitiveness.vue";
import intelligenceFactory from "../components/intelligence-factory.vue";
import { intelligenceFactoryData, factoryData } from "./constants";

const activeIndex = ref(null);

const setActive = (index) => {
  activeIndex.value = index;
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 600px;
  background: url("https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/intelligent-banner.png")
    no-repeat 100%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    text-align: center;
    font-weight: 600;
    font-size: 60px;
    color: #fff;
    letter-spacing: 3px;
  }
}
.accordion {
  display: flex;
  width: 100%;
  height: 600px;
}

.accordion-item {
  flex-basis: 0;
  flex-grow: 1;
  overflow: hidden;
  transition: all 0.3s;
  height: 600px;
  position: relative;
  &:hover .hover-card {
    display: block;
  }
}
.accordion-item-title {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 600;
  font-size: 40px;
}
.hover-card {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1678ff;
  background-image: url("https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/intelligent-hover2.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    padding: 0 10%;
    width: 100%;
    h3 {
      font-weight: 600;
      font-size: 40px;
      margin-bottom: 16px;
    }
    p {
      font-weight: 400;
      font-size: 24px;
      line-height: 42px;
    }
  }
}
.accordion-item.active {
  flex-basis: calc(100% / 4 * 0.2);
  height: 600px;
}

img {
  width: 100%;
  height: 100%;
}
</style>
